// 导入创建哈希路由，与路由提供器
import { createHashRouter,RouterProvider} from 'react-router-dom'
import HomeView from '../views/admin/HomeView';
// import LoginView from '../views/LoginView'
import Private from '../views/Private';
import LazyLoad from './LazyLoad';
import {useSelector} from 'react-redux'
import SMap from '../views/plus/SMap';
// 导入views文件夹里面的所有内容
// const modulesR = import.meta.glob(`../views/**/*.jsx`)

// 配置基础路由
const baseRoutes = [
  {path:"/",element:LazyLoad('/views/LoginView'),errorElement:<div>加载错误</div>},
  // {path:"/",element:LazyLoad('/views/LoginView'),errorElement:<div>加载错误</div>},
  {
    path:"/admin/*",
    element:<Private>{LazyLoad('/views/AdminView')}</Private>,
    children:[      
      {path:"",element:<HomeView/>},
      // {path:'produce/produceList',element:LazyLoad('/views/yp/ProduceList')},
      // {path:'produce/editProduce/:id',element:LazyLoad('/views/yp/EditProduce')},
    ]
  },
  // npm i echarts -S
  {
    path:"/echarts",
    element:LazyLoad('/views/plus/Echarts')
  },
  {
    path:"/rich",
    element:LazyLoad('/views/plus/Rich')
  },
  {
    path:"/map",
    element:<SMap/>
  }
]
// 映射路由
function mapRoutes(list){
  // 返回的路由
   var routes = [];
   for(var i=0;i<list.length;i++){
    var  obj = {};  //对象
    obj.path = list[i].path; //path映射
   //element映射 移除后缀名
    obj.element = <>{LazyLoad('/views'+list[i].component.slice(0,-4))}</>; 
    obj.errorElement = <div>加载错误 <br/><a href="#/admin/home">首页</a></div>
    routes.push(obj);
   }
   return  routes; //返回
}
// 返回路由容器
function RouterView() {
  // 获取到redux中路由配置
  const {routes} = useSelector(state=>state.permission);
  // 找到admin是第几个
  var index = baseRoutes.findIndex(item=>item.path==="/admin/*");
  // admin路由的字路由添加 映射好的路由
  baseRoutes[index].children.push(...mapRoutes(routes))
  // 创建路由返回路由提供器
  const router = createHashRouter( baseRoutes);
  return ( <RouterProvider router={router}/> );
}
// 导出
export default RouterView;

// ### 安装步骤
// npm init vite 输入项目名称  
// 选择react 选择javascript
// cd 项目目录
// npm install
// npm i sass sass-loader -D
// npm i axios react-router-dom
// npm run dev
 
 